<template>
  <div class="global-components-container">
    <!-- 这个容器用于存放全局通用的组件示例 -->
    <div v-if="showDemo">
      <h3>全局组件演示</h3>
      <div class="demo-components">
        <loading-animation text="加载中..." size="small"></loading-animation>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, h, ref, onMounted, onBeforeUnmount } from 'vue'

// 状态通知组件 - 为系统状态提供动态通知
export const StatusNotification = defineComponent({
  props: {
    status: {
      type: String,
      default: 'online',
      validator: (value) => ['online', 'offline', 'syncing', 'error'].includes(value)
    },
    message: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const isVisible = ref(true)
    
    const getStatusColor = () => {
      switch(props.status) {
        case 'online': return '#52c41a';
        case 'offline': return '#f5222d';
        case 'syncing': return '#faad14';
        case 'error': return '#ff4d4f';
        default: return '#1890ff';
      }
    }
    
    const getStatusText = () => {
      switch(props.status) {
        case 'online': return '区块链网络正常';
        case 'offline': return '区块链网络离线';
        case 'syncing': return '区块链同步中';
        case 'error': return '区块链网络错误';
        default: return '未知状态';
      }
    }
    
    const hide = () => {
      isVisible.value = false
    }
    
    return () => isVisible.value ? h('div', {
      class: 'blockchain-status-notification',
      style: {
        position: 'fixed',
        bottom: '20px',
        right: '20px',
        padding: '10px 16px',
        background: '#fff',
        borderRadius: '6px',
        boxShadow: '0 3px 6px -4px rgba(0,0,0,0.12), 0 6px 16px 0 rgba(0,0,0,0.08)',
        display: 'flex',
        alignItems: 'center',
        zIndex: 9999,
        animation: 'slide-in-right 0.3s ease'
      }
    }, [
      h('div', {
        class: 'status-indicator',
        style: {
          width: '8px',
          height: '8px',
          borderRadius: '50%',
          background: getStatusColor(),
          marginRight: '10px',
          boxShadow: `0 0 0 3px ${getStatusColor()}33`,
          animation: props.status === 'syncing' ? 'pulse 1.5s infinite' : ''
        }
      }),
      h('div', {
        class: 'status-message',
        style: {
          marginRight: '15px'
        }
      }, [
        h('div', { 
          style: {
            fontWeight: '500',
            fontSize: '14px',
            color: '#303133'
          }
        }, props.message || getStatusText()),
        props.status === 'syncing' ? h('div', {
          style: {
            fontSize: '12px',
            color: '#909399'
          }
        }, '正在同步区块数据，请稍候...') : null
      ]),
      h('button', {
        class: 'close-button',
        style: {
          background: 'none',
          border: 'none',
          color: '#909399',
          cursor: 'pointer',
          fontSize: '14px'
        },
        onClick: hide
      }, '×')
    ]) : null
  }
})

// 浮动统计卡片组件 - 显示系统统计信息的动态卡片
export const StatisticCard = defineComponent({
  props: {
    title: {
      type: String,
      required: true
    },
    value: {
      type: [Number, String],
      required: true
    },
    prefix: {
      type: String,
      default: ''
    },
    suffix: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: 'el-icon-data-analysis'
    },
    color: {
      type: String,
      default: '#1890ff'
    }
  },
  setup(props) {
    const animatedValue = ref(0)
    const targetValue = typeof props.value === 'number' ? props.value : 0
    
    onMounted(() => {
      const duration = 1000
      const startTime = performance.now()
      
      const animate = (currentTime) => {
        const elapsed = currentTime - startTime
        const progress = Math.min(elapsed / duration, 1)
        
        animatedValue.value = Math.floor(progress * targetValue)
        
        if (progress < 1) {
          requestAnimationFrame(animate)
        }
      }
      
      requestAnimationFrame(animate)
    })
    
    return () => h('div', {
      class: 'statistic-card',
      style: {
        background: '#fff',
        borderRadius: '8px',
        padding: '20px',
        boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
        position: 'relative',
        overflow: 'hidden',
        transition: 'all 0.3s',
        cursor: 'default'
      }
    }, [
      h('div', {
        class: 'card-icon',
        style: {
          position: 'absolute',
          right: '10px',
          top: '10px',
          width: '40px',
          height: '40px',
          borderRadius: '50%',
          background: `${props.color}22`,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: '20px',
          color: props.color
        }
      }, h('i', { class: props.icon })),
      h('div', {
        class: 'card-title',
        style: {
          fontSize: '14px',
          color: '#606266',
          marginBottom: '10px'
        }
      }, props.title),
      h('div', {
        class: 'card-value',
        style: {
          fontSize: '24px',
          fontWeight: '600',
          color: '#303133',
          display: 'flex',
          alignItems: 'baseline'
        }
      }, [
        props.prefix ? h('span', {
          style: {
            fontSize: '14px',
            marginRight: '4px',
            color: '#606266'
          }
        }, props.prefix) : null,
        h('span', {}, typeof props.value === 'number' ? animatedValue.value : props.value),
        props.suffix ? h('span', {
          style: {
            fontSize: '14px',
            marginLeft: '4px',
            color: '#606266'
          }
        }, props.suffix) : null
      ]),
      h('div', {
        class: 'card-bg-icon',
        style: {
          position: 'absolute',
          right: '-20px',
          bottom: '-20px',
          fontSize: '80px',
          opacity: '0.05',
          color: props.color
        }
      }, h('i', { class: props.icon }))
    ])
  }
})

// 区块链活动流 - 显示最新区块链交易或活动
export const BlockchainActivity = defineComponent({
  props: {
    activities: {
      type: Array,
      default: () => []
    }
  },
  setup(props) {
    const currentTime = ref(new Date())
    let timer = null
    
    onMounted(() => {
      timer = setInterval(() => {
        currentTime.value = new Date()
      }, 60000) // 每分钟更新一次
    })
    
    onBeforeUnmount(() => {
      if (timer) clearInterval(timer)
    })
    
    const getTimeAgo = (timestamp) => {
      const seconds = Math.floor((currentTime.value - new Date(timestamp)) / 1000)
      if (seconds < 60) return `${seconds}秒前`
      
      const minutes = Math.floor(seconds / 60)
      if (minutes < 60) return `${minutes}分钟前`
      
      const hours = Math.floor(minutes / 60)
      if (hours < 24) return `${hours}小时前`
      
      const days = Math.floor(hours / 24)
      return `${days}天前`
    }
    
    return () => h('div', {
      class: 'blockchain-activity',
      style: {
        background: '#fff',
        borderRadius: '8px',
        padding: '16px',
        boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
      }
    }, [
      h('div', {
        class: 'activity-header',
        style: {
          display: 'flex',
          alignItems: 'center',
          marginBottom: '16px'
        }
      }, [
        h('i', {
          class: 'el-icon-coin',
          style: {
            fontSize: '18px',
            color: '#1890ff',
            marginRight: '8px'
          }
        }),
        h('span', {
          style: {
            fontSize: '16px',
            fontWeight: '600',
            color: '#303133'
          }
        }, '区块链活动')
      ]),
      props.activities.length === 0 ? 
        h('div', {
          class: 'empty-activity',
          style: {
            textAlign: 'center',
            padding: '20px 0',
            color: '#909399'
          }
        }, '暂无活动数据') :
        h('ul', {
          class: 'activity-list',
          style: {
            listStyle: 'none',
            padding: '0',
            margin: '0'
          }
        }, props.activities.map((activity, index) => h('li', {
          key: activity.id || index,
          class: 'activity-item',
          style: {
            padding: '10px 0',
            borderBottom: index < props.activities.length - 1 ? '1px solid #f0f0f0' : 'none',
            position: 'relative'
          }
        }, [
          h('div', {
            class: 'activity-dot',
            style: {
              position: 'absolute',
              top: '14px',
              left: '-4px',
              width: '8px',
              height: '8px',
              borderRadius: '50%',
              background: activity.type === 'certificate' ? '#52c41a' : 
                          activity.type === 'revoke' ? '#f5222d' : '#1890ff',
              boxShadow: activity.type === 'certificate' ? '0 0 0 3px rgba(82, 196, 26, 0.2)' : 
                         activity.type === 'revoke' ? '0 0 0 3px rgba(245, 34, 45, 0.2)' : 
                         '0 0 0 3px rgba(24, 144, 255, 0.2)'
            }
          }),
          h('div', {
            class: 'activity-content',
            style: {
              marginLeft: '14px'
            }
          }, [
            h('div', {
              class: 'activity-title',
              style: {
                fontSize: '14px',
                color: '#303133',
                fontWeight: '500'
              }
            }, activity.title),
            h('div', {
              class: 'activity-detail',
              style: {
                fontSize: '12px',
                color: '#909399',
                marginTop: '4px'
              }
            }, activity.description),
            h('div', {
              class: 'activity-time',
              style: {
                fontSize: '12px',
                color: '#c0c4cc',
                marginTop: '4px'
              }
            }, getTimeAgo(activity.timestamp))
          ])
        ])))
    ])
  }
})

// 加载动画组件 - 在内容加载时显示的动画效果
export const LoadingAnimation = defineComponent({
  props: {
    text: {
      type: String,
      default: '加载中...'
    },
    size: {
      type: String,
      default: 'default',
      validator: (value) => ['small', 'default', 'large'].includes(value)
    }
  },
  setup(props) {
    const getSize = () => {
      switch(props.size) {
        case 'small': return { dot: '6px', container: '40px', text: '12px' };
        case 'large': return { dot: '12px', container: '80px', text: '16px' };
        default: return { dot: '8px', container: '60px', text: '14px' };
      }
    }
    
    const size = getSize()
    
    return () => h('div', {
      class: 'custom-loading-animation',
      style: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center'
      }
    }, [
      h('div', {
        class: 'loading-dots',
        style: {
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          width: size.container,
          height: size.container
        }
      }, Array.from({ length: 4 }).map((_, i) => h('div', {
        key: i,
        style: {
          width: size.dot,
          height: size.dot,
          borderRadius: '50%',
          background: `hsl(${i * 90}, 70%, 60%)`,
          margin: '0 2px',
          animation: 'loading-dots 1s infinite',
          animationDelay: `${i * 0.1}s`
        }
      }))),
      props.text ? h('div', {
        class: 'loading-text',
        style: {
          marginTop: '10px',
          fontSize: size.text,
          color: '#606266'
        }
      }, props.text) : null
    ])
  }
})

// 组件本身的设置
export default {
  name: 'GlobalComponents',
  components: {
    LoadingAnimation
  },
  setup() {
    // 是否显示演示内容，可以通过环境变量或配置来控制
    const showDemo = ref(false)
    
    return {
      showDemo,
      StatusNotification,
      StatisticCard,
      BlockchainActivity,
      LoadingAnimation
    }
  }
}
</script>

<style>
@keyframes slide-in-right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(250, 173, 20, 0.6);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(250, 173, 20, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(250, 173, 20, 0);
  }
}

@keyframes loading-dots {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.statistic-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

.blockchain-status-notification {
  animation: slide-in-right 0.3s ease;
}

.global-components-container {
  display: none; /* 默认隐藏，仅供演示 */
}

.demo-components {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
</style> 